<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- for-mobile-apps -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link href="__ROOT__/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<link href="__ROOT__/css/ihover.css" rel="stylesheet" type="text/css" media="all" />
		<link href="__ROOT__/css/iconeffects.css" rel='stylesheet' type='text/css' />
		<link rel="stylesheet" href="__ROOT__/css/swipebox.css">
		<link rel="stylesheet" href="__ROOT__/css/global.css" />
		<link rel="stylesheet" href="__ROOT__/css/style.css" />
		<link rel="stylesheet" href="__ROOT__/css/aboutXR1.css" />
		<link rel="stylesheet" href="__ROOT__/css/xin/xin.css" />
		<link rel="stylesheet" href="__ROOT__/css/xin/xinSchool.css" />
		<link rel="stylesheet" href="__ROOT__/css/xiangyingshi.css" />
		<link rel="icon" href="__ROOT__/images/favicon.ico" type="image/x-icon">
		<script type="text/javascript" src="__ROOT__/js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="__ROOT__/js/aboutXR1.js"></script>
		<script type="text/javascript" src="__ROOT__/js/xin/xin.js"></script>
		<script type="text/javascript" src="__ROOT__/js/xin/jquery.waypoints.min.js"></script>
		<script type="text/javascript" src="__ROOT__/js/xin/jquery.countup.min.js"></script>
		<script type="text/javascript" src="__ROOT__/js/xin/xinSchool.js"></script>
		<script type="text/javascript" src="__ROOT__/js/global.js"></script>
	</head>
	<body class="xin">
<!-- js响应式rem单位 -->
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
</script>
<!-- js响应式rem单位 end -->
</head>
<style>
/*移动端导航css*/
.navPhone{position: fixed;left: 0;right: 0;top: 0;bottom: 0; z-index: 10;
transform: translate(-100%,0);
-webkit-transform: translate(-100%,0);
-ms-transform: translate(-100%,0);
-moz-transform: translate(-100%,0);
-o-transform: translate(-100%,0);

transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
.navPhone .navMenuList{margin: 0;height: 100%;background: #fff;}
.navPhone .navMenuList a{margin: 0;color: #fff;}
.navPhone .navMenuList .leftMenuList{height: 100%;width: 80%;background: #ffc600;overflow: scroll;}
.navPhone .navMenuList .leftMenuList>.item{}
.navPhone .navMenuList .leftMenuList>.item a{border-bottom: 1px solid #ffde6d;padding: 0 10%;display: block;height: .6rem;line-height: .6rem;}
.navPhone .navMenuList .leftMenuList .item.DownIcon{}
.navPhone .navMenuList .item.DownIcon .top{border-bottom: 1px solid #ffde6d;background: url(../images/navPhoneIcon_07.png) no-repeat 94% center;background-size: .2rem;}
.navPhone .navMenuList .item.DownIcon .top>a{display: inline-block;border: none;}
.navPhone .DownMenuList{text-indent: .2rem;background: #e4b018;}
.navPhone.current{display: block;}
.navPhone.current{
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-ms-transform: translate(0,0);
	-o-transform: translate(0,0);
}

.NyPcNav .navMenuList a{color: #fff;}

.navPhoneIcon{position: absolute; background: rgba(255,255,255,0.5);padding: .15rem;right: .3rem;top: .3rem;z-index: 11;display: none;}
.navPhoneIcon span{display: block;height: .03rem;width: .4rem;background: #222;margin: .05rem 0;
transition: transform 1s;
-webkit-transition: transform 1s;
-moz-transition: transform 1s;
-o-transition: transform 1s;
}
.navPhoneIcon.current span:nth-of-type(1){
	transform: translate(0,0.09rem) rotate(45deg);
	-webkit-transform: translate(0,0.09rem) rotate(45deg);
	-moz-transform: translate(0,0.09rem) rotate(45deg);
	-ms-transform: translate(0,0.09rem) rotate(45deg);
	-o-transform: translate(0,0.09rem) rotate(45deg);
}
.navPhoneIcon.current span:nth-of-type(3){
	transform: translate(0,-0.09rem) rotate(-45deg);
	-webkit-transform: translate(0,-0.09rem) rotate(-45deg);
	-moz-transform: translate(0,-0.09rem) rotate(-45deg);
	-ms-transform: translate(0,-0.09rem) rotate(-45deg);
	-o-transform: translate(0,-0.09rem) rotate(-45deg);
}
.navPhoneIcon.current span:nth-of-type(2){opacity: 0;}
@media only screen and (max-width: 1201px) and (min-width: 320px){
	.navPhone, .navPhoneIcon {
	    display: block;
	    font-size: 0.2rem;
	}
	/*.banner-info,*/
	.pcNav
	{display: none;}
}
/*移动端导航css end*/
</style>
<body>
	<!-- navPhone -->
<include file="./Common/View/header.html" />
<style>
	.pcNav{width: 100%;box-sizing: border-box;height: .9rem;position: fixed;top: 0;z-index: 9;background: rgba(0,0,0,0.5);text-align: center;font-size: 0;}
	.pcNav>.item{position: relative;height: 100%;display: inline-block;vertical-align: top;min-width: 1.2rem;font-size: .16rem;}
	.pcNav>.item:hover{background: rgba(0,0,0,0.5);}
	.pcNav>.item>a{position: relative;height: 100%;color: #fff;}
	.pcNav>.item a{display: block;padding: 0 .2rem;}
	.pcNav>.item a.topMenu{display: inline-block;height: 100%;line-height: .8rem;}
	.pcNav>.item ul.downMenu{width: 100%;background: rgba(0,0,0,0.8);display: none;}
	.pcNav>.item:hover ul.downMenu{display: block;}
	.pcNav>.item ul.downMenu li{width: 100%;box-sizing: border-box;padding: 0 .1rem;}
	.pcNav>.item ul.downMenu a{width: 100%;color: #fff;border-bottom: 0.01rem solid #222;padding: .1rem 0;font-size: .14rem;}
	.pcNav>.item ul.downMenu a:hover{border-bottom: 0.01rem solid #fbc902;}
</style>
<!-- pcNav end -->		
		<div class="banner section section-1" style="background: url(/images/read.jpg) no-repeat 0px 0px;">
			<ul class="xinTitle">
				
				
				<li class="xinTitleList">
					<a href="{:U('Home/Index/xin',['cid'=>2])}">
						<div class="xinTitleImg">
							<img src="__ROOT__/images/school.png" class="school"/>
						</div>
						<div class="xinTitleText">
							<p class="xinTitleText1">欣慧教学</p>
							
						</div>
					</a>
				</li>
				<li class="xinTitleList" style="background-color: rgba(0,0,0,.8);">
					<a href="{:U('Home/Index/xin',['cid'=>3])}">
						<div class="xinTitleImg">
							<img src="__ROOT__/images/read.png" class="read"/>
						</div>
						<div class="xinTitleText">
							<p class="xinTitleText1">欣智阅读</p>
							
						</div>
					</a>
				</li>
				<li class="xinTitleList">
					<a href="{:U('Home/Index/xin',['cid'=>1])}">
						<div class="xinTitleImg">
							<img src="__ROOT__/images/grow.png" class="grow"/>
						</div>
						<div class="xinTitleText">
							<p class="xinTitleText1">欣悦成长</p>
							
						</div>
					</a>
				</li>
			</ul>
		</div>
		<section class="center">
			<ul class="message">
				<li style="display:block">
					<h3 class="welcome">NEW HORIZON CHARITY FOUNDATION</h3>
					<div class="xr">
						<span style="left:0"></span>
						<strong>欣智阅读计划</strong>
						<span style="right:0"></span>
					</div>
					<div class="xrText" style="text-align: left;">
						<p>为全面改善乡村小学的阅读环境，满足7-12岁乡村儿童在认知黄金发展阶段对语言表达、形象思维、探索能力发展的需求，向荣公益基金会通过学校图书室，班级图书角，学生阅读小组的建设与管理，建立独具特色的儿童阅读模式，开展“天天悦读”活动，助力“乡土书香”校园建设，培养儿童阅读习惯，提高阅读能力，促进认知发展。</p>
					</div>
				</li>
			</ul>
			<div class="xinNumber" style="background: url(/images/grow11.jpg) no-repeat;background-size: 100%;">
				<p class="xinNumberText">向荣公益项目自2018年3月启动，截止{$found.time|date='Y年m月d日',###}共使用善款</p>
				<p class="xinNumberNum counter">{$found.money}</p>
				<p class="xinNumberTextNum">
					<span class="donate">捐助</span>
					<span class="xin356 counter">{$found.school}</span>
					<span class="rural">所乡村小学</span>
					<span class="total">共有</span>
					<span class="xin652 counter">{$found.earnings_number}</span>
					<span class="child">名儿童受益</span>
				</p>
			</div>
			<div>
				<div class="newsList">
					<p class="newsListE">EVENTS</p>
					<span class="newsListC">新闻</span>
				</div>
				<div class="newsListInfoBox">
					<span class="topsj"></span>
					<ul class="newsListInfo">
					<volist name="arts" id="a">
						<li class="clearfix newsBox">
							<div class="newsListInfoDate">
								<span>{$a.ymd|substr=8,2}</span>
								<span>{$a.ymd|substr=0,7}</span>
							</div>
							<div class="newsListInfos">
								<a href="/Home/Index/art/aid/{$a.aid}">
									<h3>{$a.title}</h3>
									<!--<div>By<span> New Horizon </span></div>-->
									<p>{$a.content|mb_substr=0,80}...</p>
								</a>
							</div>
							<div class="newsListInfoImg">
								<img src="{$a.pic1}" alt="" />
							</div>
						</li>
						</volist>
						
					</ul>
					<span class="bottomsj"></span>
				</div>
			</div>
		</section>
		<include file="./Common/View/fotter.html" />
	</body>

	<style>
		@media only screen and (min-width: 320px) and (max-width: 1201px){
			html,body{width: 100%;overflow-x: hidden;}
			section,
			.message,
			.xin .newsList,
			.newsListInfoBox,
			.xin .newsListInfo, .xin .newsList,
			.xin .newsListInfoDate,
			.xin .newsListInfos,
			.xin .xinTitle
			{width: 100%;}
			.xin .newsList,
			.xin .newsListInfoBox
			{padding: 0 3%;}
			.xin .newsListInfoBox,
			.xin .xinNumber
			{height: auto;}
			.xin .newsListInfoBox{padding: 0 3% .4rem 3%;}
			.xin .topsj, .xin .bottomsj{display: none;}
			.xin .xinTitle{left: 0;text-align: center;}
			.xin .xinTitle li{display: inline-block;width: auto;float: none;width:70%;}
		}
		@media only screen and (min-width: 320px) and (max-width: 641px){
			.xin .newsListInfoImg{display: none;}
		}
	</style>
</html>
